<template>
  <div>
    <van-nav-bar title="养护服务" left-arrow @click-left="onClickLeft" />
    <div>
      <!-- <van-card
           
              style="position:absolute;top:2rem;left:0.015rem"
              num="2"
              price="2.00"
              desc="描述信息"
              title="首饰养护"
              
              thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
      />-->
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
      >
        <div slot="footer">
          <van-button size="mini">发送链接</van-button>
          <van-button size="mini">立即购买</van-button>
        </div>
      </van-card>
    </div>
    <ul>
      <li v-for="item in list" style="display:flex;margin:.4rem 0;">
        <img
          src="https://img.yzcdn.cn/vant/t-thirt.jpg"
          style="display:block;height:1rem;width:1rem;margin-right:.5rem;"
        />
        <span style="background:#ccc;border-radius: 5%;height:.5rem">{{item}}</span>
      </li>
    </ul>
    <div style="display:flex;position:absolute;bottom:0.2rem;left:0.4rem;">
      <van-icon name="phone" style="font-size:.44rem;margin-right:0.2rem" />
      <input
        type="text"
        v-model="ipt"
        style="border:none;background:#ccc;heght:.44rem;margin-right:1rem"
      />
      <button @click="tab()">发送信息</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ipt: "",
      list: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tab() {
      this.list.push(this.ipt);
      this.ipt = "";
    }
  }
};
</script>
<style scoped>
</style>
